<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 页面內容 -->
			<view class="grace-columns">
				<image src="../../static/sybj.png" mode="" style="width: 750rpx;height: 570rpx;"></image>
				<view style="z-index: 99;margin:0 auto;">
					<!-- 没有收益时显示 -->
					<view v-if="shouyi_name">
						<view style="font-size:36rpx;font-weight:bold;color:rgba(255,255,255,1);margin-top: -500rpx;">收益</view>
						<view style="font-size:30rpx;color:rgba(255,255,255,1);margin-top: 30rpx;margin-left: 8rpx;">余额</view>
					</view>
					<!-- 有收益时显示 -->
					<view v-else>
						<view style="font-size:36rpx;font-weight:bold;color:rgba(255,255,255,1);margin-top: -500rpx;margin-left: 30rpx;">收益</view>
						<view style="margin-left: -10rpx;margin-top: 12rpx;">
							<image src="../../static2/tanhao.png" mode="" style="width: 32rpx;height: 32rpx;margin-top: 10rpx;transform: translateY(5rpx);"></image>
							<text style="font-size:30rpx;color:rgba(255,255,255,1);margin-left: 10rpx;">未得收益</text>

						</view>
					</view>
				</view>
				<!-- 余额 -->
				<view style="font-size:70rpx;font-weight:bold;color:rgba(255,255,255,1);z-index: 99;margin: -339rpx auto;">{{jine}}</view>
				<!-- 是否是vip -->
				<view class="tixiab" @tap="tixian(is_vip)">{{is_vip!==0? '提现':'升级'}}</view>
				<!-- 明细、消费过、新增 -->
				<view class="mxz grace-rows">
					<view class="grace-columns" @tap="minxi">
						<view class="daijihuo">
							<view style="font-size:26rpx;font-family:PingFang SC;font-weight:400;color:rgba(52,52,52,1);text-align: center;margin-top: 28rpx;">待激活用户</view>
							<view style="font-size:32rpx;font-family:PingFang SC;font-weight:400;color:rgba(52,52,52,1);text-align: center;">{{activated}}</view>
						</view>
					</view>
					<!-- 消费过 -->
					<view class="grace-columns">
						<view class="xiaofeiguo" @tap="tuig">
							<view style="font-size:26rpx;font-family:PingFang SC;font-weight:400;color:rgba(52,52,52,1);text-align: center;margin-top: 28rpx;">消费过用户</view>
							<view style="font-size:32rpx;font-family:PingFang SC;font-weight:400;color:rgba(52,52,52,1);text-align: center;">{{effective}}</view>
						</view>
					</view>
					<!-- 新增 -->
					<view class="grace-columns" @tap="xinzs">
						<view class="xinzeng">
							<view style="font-size:26rpx;font-family:PingFang SC;font-weight:400;color:rgba(52,52,52,1);text-align: center;margin-top: 28rpx;">今日新增用户</view>
							<view style="font-size:32rpx;font-family:PingFang SC;font-weight:400;color:rgba(52,52,52,1);text-align: center;">{{today}}</view>
						</view>
					</view>
				</view>
				<!-- 未继续使用 -->
				<view class="wjxsy" @tap="jxshiy">
					<view style="width: 10rpx;height: 100rpx;background-color: rgba(46, 157, 7, 1);display: inline-block;float: left;"></view>
					<text class="zhihao">未继续使用</text>
					<image src="../../static2/jianto.png" mode="" class="jiantos"></image>
				</view>
				<!-- 分润 -->
				<view class="wjxsy_2" @tap="fenrun">
					<view style="width: 10rpx;height: 100rpx;background-color: rgba(227, 181, 20, 1);display: inline-block;float: left;"></view>
					<text class="zhihao">分润收益明细</text>
					<image src="../../static2/jianto.png" mode="" class="jiantos"></image>
				</view>
				<!-- 佣金 -->
				<view class="wjxsy_2" @tap="tuij">
					<view style="width: 10rpx;height: 100rpx;background-color: rgba(227, 64, 20, 1);display: inline-block;float: left;"></view>
					<text class="zhihao">推荐佣金</text>
					<image src="../../static2/jianto.png" mode="" class="jiantos"></image>
				</view>
				<!-- 鑫链卡 -->
				<scroll-view class="grace-scroll-x" scroll-x="true" scroll-left="120" scroll-with-animation="true" >
					<view v-for="(item,index) in card_data" :key="index" style="display: inline-block;">
						<image :src="item.cc_img_url" mode="" style="width: 524rpx;height: 270rpx;margin: 30rpx 43rpx;"></image>
						<view class="bhan" v-show="item.cc_encoding">
							<view class="bianhao">{{'NO.'+item.cc_encoding}}</view>
							<view class="bianx">
								<view class="btn" style="margin-right: 18rpx;" @tap="bianxian(item.cc_id)">变现</view>
								<view class="btn" @tap="use_sy(item.cc_encoding,item.cc_id)">使用</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</gracePage>

</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import dnIcon from "../../components/dn-icon_1.2/component/dn-icon/dn-icon.vue";
	export default {
		data() {
			return {
				shouyi_name: false,
				jine: 0,
				is_vip: '',
				activated: '',
				effective: '',
				today: '',
				card_data: []
			}
		},
		onShow: function() {
			var vm = this;
			vm.req.post(
				vm.lochost + '/index/index?method=user_earnings', {}, {},
				function(res) {
					console.log(res);
					vm.is_vip = res.data.ul_level
					vm.activated = res.data.await_activate_data.num
					vm.effective = res.data.effective_use_data.num
					vm.today = res.data.today_add_user_data.num
					if (res.data.ul_beans == 0) {
						vm.shouyi_name = false;
						vm.jine = res.data.ul_beans;
					} else {
						vm.shouyi_name = true;
						vm.jine = res.data.ul_beans;
					}
					var card_list = res.data.card_data
					for (var i = 0; i < card_list.length; i++) {
						vm.card_data.push(card_list[i])
					}

				}
			);
			// 	vm.req.post(
			// 		vm.lochost + '/mytrunk/userapi/getuser', {}, {},
			// 		function(res) {
			// 			vm.zong_shanghu = res.data.zong_shanghu;
			// 			vm.da_tuan_dui = res.data.da_tuan_dui;
			// 			vm.xiao_tuan_dui = res.data.xiao_tuan_dui
			// 			if (vm.yingchang == false) {
			// 				vm.zhi = '*';
			// 				vm.jian = '*';
			// 			} 
			// 			if (vm.yingchan == false) {
			// 				vm.vip_zhi = '*';
			// 				vm.vip_jian = '*';
			// 			}
			// 			if (vm.yingcha == false) {
			// 				vm.daili_zhi = '*';
			// 				vm.daili_jian = '*'
			// 			} 
			// 			if (vm.yingc == false) {
			// 				vm.hehuo_zhi = '*';
			// 				vm.hehuo_jian = '*'
			// 			} 

			// 		}
			// 	);
			// 	this.req.post(
			// 		this.lochost + '/mytrunk/userapi/getuser', {}, {},
			// 		function(res) {
			// 			var data = res.data;
			// 			vm.headpic = data.headpic;
			// 			if (data.level_img) {
			// 				vm.headpic = data.level_img;
			// 			}
			// 		}
			// 	)
		},
		methods: {
			// 待激活用户
			minxi() {
				this.Goto('/pages/profit/Details_activated')
			},
			// 消费过用户
			tuig() {
				this.Goto('/pages/profit/Consumed')
			},
			// 今日新增
			xinzs() {
				this.Goto('/pages/profit/New_today')
			},
			// 未继续使用
			jxshiy() {
				this.Goto('/pages/profit/Continued_use')
			},
			//分润明细
			fenrun() {
				this.Goto('/pages/profit/income_details')
			},
			// 推荐佣金
			tuij() {
				this.Goto('/pages/profit/Xinka')
			},
			// 鑫链卡使用
			use_sy(coding,card_id){
				this.Goto('/pages/profit/Use_file?card_id='+card_id+'&coding='+coding)
			},
			// 提现或升级
			tixian(vip) {
				if (vip !== 0) {
					this.Goto('/pages/profit/cash_withdrawal')
				} else {
					this.Goto('pages/rise_vip/rise_vip')
				}
			},

			// 免费用户
			yinchans() {
				var vm = this;
				vm.yingchang = true;
				vm.req.post(
					vm.lochost + '/mytrunk/userapi/getuser', {}, {},
					function(res) {
						vm.zhi = res.data.child[10000].zhi;
						vm.jian = res.data.child[10000].jian;

					})
			},
			yinchan() {
				this.yingchang = false;
				this.zhi = '*';
				this.jian = '*'
			},
			// VIP
			vip_yin() {
				var vm = this;
				vm.yingchan = true;
				vm.req.post(
					vm.lochost + '/mytrunk/userapi/getuser', {}, {},
					function(res) {
						vm.vip_zhi = res.data.child[9999].zhi;
						vm.vip_jian = res.data.child[9999].jian;
					})

			},
			vip_yinc() {
				this.yingchan = false;
				this.vip_zhi = '*';
				this.vip_jian = '*'
			},
			// 代理
			dl_yin() {
				var vm = this;
				vm.yingcha = true;
				vm.req.post(
					vm.lochost + '/mytrunk/userapi/getuser', {}, {},
					function(res) {
						vm.daili_zhi = res.data.child[9998].zhi;
						vm.daili_jian = res.data.child[9998].jian;
					})

			},
			dl_yins() {
				this.yingcha = false;
				this.daili_zhi = '*';
				this.daili_jian = '*'
			},
			// 合伙人
			hehuo_yin() {
				var vm = this;
				vm.yingc = true;
				vm.req.post(
					vm.lochost + '/mytrunk/userapi/getuser', {}, {},
					function(res) {
						vm.hehuo_zhi = res.data.child[9992].zhi;
						vm.hehuo_jian = res.data.child[9992].jian
					})

			},
			hehuo_yint() {
				this.yingc = false;
				this.hehuo_zhi = '*';
				this.hehuo_jian = '*'
			}

		},
		components: {
			gracePage,
			dnIcon
		}
	}
</script>

<style>
	.tixiab {
		width: 160rpx;
		height: 50rpx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		font-size: 24rpx;
		color: rgba(249, 129, 0, 1);
		z-index: 999;
		margin: 360rpx auto;
		line-height: 50rpx;
		text-align: center;
	}

	.mxz {
		width: 702rpx;
		height: 200rpx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		margin-top: -289rpx;
		z-index: 9999;
		margin-left: 24rpx;
	}

	.daijihuo {
		width: 180rpx;
		height: 130rpx;
		background: linear-gradient(54deg, rgba(255, 186, 0, 1) 0%, rgba(255, 252, 0, 1) 100%);
		border-radius: 10rpx;
		margin-top: 35rpx;
		margin-left: 41rpx;
	}

	.xiaofeiguo {
		width: 180rpx;
		height: 130rpx;
		background: linear-gradient(54deg, rgba(0, 144, 255, 1) 0%, rgba(0, 210, 255, 1) 100%);
		border-radius: 10rpx;
		margin-top: 35rpx;
		margin-left: 41rpx;
	}

	.xinzeng {
		width: 180rpx;
		height: 130rpx;
		background: linear-gradient(54deg, rgba(0, 228, 220, 1) 0%, rgba(0, 240, 130, 1) 100%);
		border-radius: 10rpx;
		margin-top: 35rpx;
		margin-left: 41rpx;
	}

	.wjxsy {
		width: 750rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.wjxsy_2 {
		width: 750rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		margin-top: 10rpx;
	}

	.zhihao {
		font-size: 30rpx;
		line-height: 100rpx;
		margin-left: 13rpx;
	}

	.jiantos {
		width: 20rpx;
		height: 34rpx;
		float: right;
		margin-top: 35rpx;
		margin-right: 24rpx;
	}


	.btuns {
		width: 180rpx;
		height: 100rpx;
		background: linear-gradient(54deg, rgba(250, 104, 71, 1) 0%, rgba(250, 177, 51, 1) 100%);
		border-radius: 10px;
		margin-top: -15rpx;
		border: none;
	}

	.tes {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.btun {
		width: 180rpx;
		height: 100rpx;
		background: linear-gradient(54deg, rgba(255, 186, 0, 1) 0%, rgba(255, 252, 0, 1) 100%);
		border-radius: 10px;
		margin-top: -15rpx;
		border: none;
	}

	.btunt {
		width: 180rpx;
		height: 100rpx;
		background: linear-gradient(54deg, rgba(0, 228, 220, 1) 0%, rgba(0, 240, 130, 1) 100%);
		border-radius: 10px;
		margin-top: -15rpx;
		border: none;
	}

	.daili {
		margin-top: 20rpx;
	}

	.mianfei {
		width: 750rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		line-height: 100rpx;
	}

	.yh {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-left: 24rpx;
	}

	.zt {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-left: 77rpx;
	}

	.zt_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-left: 162rpx;
	}

	.zt_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-left: 110rpx;
	}

	.zts {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-left: 129rpx;
	}

	.dns {
		width: 40rpx;
		height: 40rpx;
		float: right;
		margin-right: 22rpx;
		margin-top: 30rpx;
	}

	.vip_s {
		width: 750rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		line-height: 100rpx;
		margin-top: 8rpx;
	}

	.buan {
		/* width: 750rpx;
		height: 100rpx;
		background-color: #FFFFFF; */
		margin-top: 20rpx;
	}
	.bhan {
		display: flex;
		justify-content: space-between;
	}
	
	.bianhao {
		float: left;
		margin-top: -45rpx;
		z-index: 99;
		color: rgba(250, 146, 52, 1);
		font-size: 29rpx;
		margin-left: 120rpx;
		transform: translate(-60rpx,-40rpx);
	}
	
	.bianx {
		margin-right:30rpx;
		transform: translateX(-30rpx);
	}
	
	.btn {
		display: inline-block;
		/* float: right; */
		width: 110rpx;
		height: 35rpx;
		font-size: 22rpx;
		line-height: 35rpx;
		transform: translateY(-80rpx);
		/* background-color: #000000; */
		color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
		text-align: center;
		border-radius: 10rpx;
		/* margin-right: 18rpx; */
	}
	
	/* .vuan_b{
		width: 200rpx;
		height: 70rpx;
		background:rgba(22,120,255,1);
		box-shadow:0px 5px 1px 0px rgba(0,97,231,0.3);
		border-radius:35px;
		font-size:32rpx;color:rgba(255,255,255,1);line-height: 70rpx;
		transform: translateY(-20rpx);
	} */
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
